﻿<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title></title>
	    <script src="./js/common/axios.min.js"></script>
        <script src="./js/common/vue.js"></script>
        <script src="./js/common/template.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <script type="text/javascript" src="js/common/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/media.css">
        <style>
            .content{
                position: relative;
            }
        </style>
    </head>
    <body>

        <div id="zgw">
            <div id="palace" class="flex">
                <v-nav></v-nav>
                <v-main></v-main>
            </div>
        </div>

        <template id="vMain">
            <div class="content overAuto">
                <div class="fltrBox white flex flex-wrap box">
                    <div class="fg flex flex-align-items">
                        企业名称 <div class="inp"><input type="text" v-model="comp" placeholder="请输入"></div>
                    </div>
                    <div class="fg flex flex-align-items">
                        添加时间 
                        <div class="inp input-group date" id='datetimepicker1'>
                            <span class="fill input-group-addon">
                                <span class="glyphicon vc glyphicon-calendar"></span>
                            </span>
                            <input type='text' class="rptTime" class="timeInput"/>
                        </div>
                    </div>
                    <div class="blue btn" @click="search">查询</div>
                </div>
                <div class="white box">
                    <div class="btn orange">企业权限分配</div>
                </div>
                <div class="tableBox overAuto">
                    <table class="white">
                        <thead>
                            <!--
                            <td>
                                <div class="chsBox"><p class="chs"><img src="img/gou.png"></p></div>
                            </td>
                            -->
                            <td v-for="(item,i) in thd">
                                <div :style="'min-width:' + item.width + 'px'">{{item.name}}</div>
                            </td>
                        </thead>
                        <tbody>
                            <tr v-for="(item,i) in tblData">
                                <td v-for="(value,key) in item">
                                    <div>
                                        <template v-if="key == 'btns'">
                                            <div class="btns">
                                                <span :class="['btn',bItm.cls]" v-for="(bItm,b) in value">{{bItm.name}}</span>
                                            </div>
                                        </template>
                                        <template v-else>{{value}}</template>
                                        
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="windowBox noTouch fill">
                    <p class="bg fill"></p>
                    <div class="window1 hvc white">
                        <p class="ttl">企业权限分配</p>
                        <div class="form">
                            <div class="fltrBox white flex flex-wrap">
                                <div class="fg flex flex-align-items">
                                    企业名称 <div class="inp"><input type="text" v-model="comp1" placeholder="请输入"></div>
                                </div>
                                <div class="blue btn" @click="search1">查询</div>
                            </div>
                            <div class="tblBox">
                                <p class="ttl flex flex-between flex-align-items">全部企业 <span @click="confirm" class="confirm btn blue">确定</span></p>
                                <div class="tbl">
                                    <div class="thd itm flex">
                                        <p class="item">公司名称</p>
                                        <p class="item">证件号</p>
                                        <p class="item"><span @click="hdlChs(undefined)" :class="['check vc',chsAll?'active':'']"><img class="hvc" src="img/gou.png"></span> 全选</p>
                                    </div>
                                    <div class="tbody">
                                        <div :class="['itm flex flex-align-items',item.hidden?'hidden':'']" v-for="(item,i) in tblData1">
                                            <p class="item">{{item.comp1}}</p>
                                            <p class="item">{{item.id}}</p>
                                            <p class="item">
                                                <span @click="hdlChs(i)" :class="['check vc',item.chs?'active':'']"><img class="hvc" src="img/gou.png"></span>
                                                财务快报套表权限
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        
        <script src="js/common/swiper.js"></script>
        <script src="./js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            
            
            var contn = new Vue({
                el:'#zgw',
                data:{
                
                },
                methods:{
                    
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                comp:'',
                                comp1:'',
                                thd:[
                                    {name:'ID',width:120},
                                    {name:'企业名称',width:120},
                                    {name:'财务快报报表封面代码',width:200},
                                    {name:'财务快报',width:120},
                                    {name:'同期增减比',width:120},
                                    {name:'月度环比',width:120},
                                    {name:'月度同比',width:120},
                                    {name:'累计比',width:120},
                                    {name:'导入时间',width:170},
                                    {name:'操作',width:150},
                                ],
                                tblData:[
                                    {id:124554545582,comp:'企业1',code:'2644121232154',times:'2020-02-12期',tqzj:'78%',monthRP:'26%',monthP:'24%',ttlP:'45%',intoTime:'2022-02-02 16:16:16',btns:[{name:'查看',cls:'read orange'},{name:'删除',cls:'del red'}]}
                                ],
                                chsAll:false,
                                tblData1:[
                                    {comp1:'某某某公司1',id:'2644121232154',hidden:false,chs:false},
                                    {comp1:'某某某公司2',id:'2644121232154',hidden:false,chs:false},
                                    {comp1:'某某某公司3',id:'2644121232154',hidden:false,chs:false},
                                    {comp1:'某某某公司4',id:'2644121232154',hidden:false,chs:false},
                                    {comp1:'某某某公司5',id:'2644121232154',hidden:false,chs:false},
                                    {comp1:'某某某公司6',id:'2644121232154',hidden:false,chs:false}
                                ]
                            }
                        },
                        methods:{
                            confirm(){
                                showModel('权限分配成功');
                                swtActive('.windowBox');
                            },
                            search(){
                                var This = this;
                                $('table tbody tr').removeClass('hidden');
                                var rptTime = $('.rptTime').val();
                                this.tblData.forEach(function(item,i){
                                    if(
                                        (This.comp.replace(/\s+/g,'').length && item.comp.indexOf(This.comp) < 0)
                                        ||
                                        (rptTime && item.intoTime.indexOf(rptTime) < 0)
                                    ){
                                        $('table tbody tr').eq(i).addClass('hidden');
                                    }
                                })
                            },
                            search1(){
                                var This = this;
                                var list = this.tblData1;
                                list.forEach(function(item,i){
                                    if(
                                        (This.comp1.replace(/\s+/g,'').length && item.comp1.indexOf(This.comp1) < 0)
                                    ){
                                        console.log(This.comp1,item.comp1);
                                        item.hidden = true;
                                    }else{
                                        item.hidden = false;
                                    }
                                })
                                this.tblData1 = list;
                            },
                            hdlChs(ind){
                                var list = this.tblData1;
                                var This = this;
                                console.log(ind);
                                if(ind == undefined){
                                    var chsAll = this.chsAll;
                                    this.chsAll = !chsAll;
                                    list.forEach(function(item){
                                        item.chs = !chsAll;
                                    })
                                }else{
                                    if(list[ind].chs){
                                        this.chsAll = false;
                                    }
                                    list[ind].chs = !list[ind].chs;
                                }
                                this.tblData1 = list;
                            }
                        },
                        mounted(){
                            var This = this;
                            $('table .btn').click(function(){
                                var cls = $(this)[0].className;
                                var ind = $(this).parents('tr').index();
                                if(cls.indexOf('del') >= 0){
                                    var newList = This.tblData;
                                    newList.splice(ind,1);
                                    This.tblData = newList;
                                }
                            })

                            $('.white>.orange,.windowBox .bg').click(function(){
                                swtActive('.windowBox');
                            })

                            $('.read').click(function(){
                                //window.location.href = 'cwyxfx.html';
                            })
                        }
                    },

                }
            })
            
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>